<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="员工姓名">
<input type="text" placeholder="员工工资">
<input type="text" placeholder="员工工作">
<input type="button" value="添加"><br>
<!--href=""超链接会向当前页面跳转(相当于刷新了页面)
href="#"是不跳转-->
<a href="#">请求员工列表数据</a>
<table border="1">
    <caption>员工列表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>工作</th>
    </tr>
</table>
<!-- 引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //给添加按钮添加点击事件
    $("input:last").click(function () {
        //事件中创建tr 创建 td 把文本框中的值给到td
        let tr = $("<tr></tr>");
        let nametd = $("<td></td>");
        let salarytd = $("<td></td>");
        let jobtd = $("<td></td>");
        nametd.text($("input:eq(0)").val());
        salarytd.text($("input:eq(1)").val());
        jobtd.text($("input:eq(2)").val());
        //把td装进tr
        tr.append(nametd);
        tr.append(salarytd);
        tr.append(jobtd);
        //把tr装进table
        $("table").append(tr);
    })

    //给超链接添加点击事件
    $("a").click(function () {
        //此数组 模拟从服务器请求到的数据
        let arr=[{name:"刘备",salary:5000,job:"程序员"},
            {name:"关羽",salary:4000,job:"销售"},
            {name:"张飞",salary:3000,job:"人事"}]
        //遍历数组中的每一个对象,创建tr 和3个td把对象的数据装进td
        for (let emp of arr) {
            let tr = $("<tr></tr>");
            let nametd = $("<td></td>");
            let salarytd = $("<td></td>");
            let jobtd = $("<td></td>");
            nametd.text(emp.name);
            salarytd.text(emp.salary);
            jobtd.text(emp.salary);
            tr.append(nametd);
            tr.append(salarytd);
            tr.append(jobtd);
            $("table").append(tr);
        }
        //把td装进tr   把tr装进table
    })
</script>
</body>
</html>